<template>
	<div class="yuan-container container">
	  <a-card title="发货量统计表">
		<div class="filter-panel" style="padding-bottom: 20px;">
		  <a-form layout="inline" :model="filterForm">
			<a-form-item label="发货日期">
			  <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :valueFormat="'YYYY-MM-DD'" />
			</a-form-item>
			<a-form-item label="批号">
			  <a-input v-model="filterForm.batch" placeholder="请输入批号" allowClear />
			</a-form-item>
			<a-form-item label="产品名称">
			  <a-input v-model="filterForm.materialName" placeholder="请输入产品名称" allowClear />
			</a-form-item>
			<a-form-item label="产品大类">
			  <a-select v-model="filterForm.productType" allowClear placeholder="请选择产品大类">
				<a-select-option value="C60">C60</a-select-option>
				<a-select-option value="C70">C70</a-select-option>
				<a-select-option value="C80">C80</a-select-option>
				<a-select-option value="C90">C90</a-select-option>
				<a-select-option value="C81">C81</a-select-option>
				<a-select-option value="C82">C82</a-select-option>
				<a-select-option value="C91">C91</a-select-option>
				<a-select-option value="C92">C92</a-select-option>
			  </a-select>
			</a-form-item>
			<a-form-item>
			  <a-button type="primary" @click="handleSearch">查询</a-button>
			  <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
			</a-form-item>
			<a-form-item style="float: right;margin-right: 0;">
				<a-button type="primary" @click="exportData">导出</a-button>
			</a-form-item>
		  </a-form>
		</div>
		<div class="table-container">
			<a-tag style="float: right;margin-right: 0;margin-bottom: 10px;font-size: 16px;">发货数量总数：{{ selectTotal.toFixed(2) }}</a-tag>
		  <a-table
			:loading="tableOption.loading"
			bordered
			:rowKey="item => item.id"
			:data-source="tableOption.dataSource"
			:columns="tableOption.tableColumns"
			:pagination="tableOption.pagination"
		  ></a-table>
		</div>
	  </a-card>
	</div>
  </template>
  


<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import nextApi from '@/api/nextApi';
import { downLoadFile } from '@/utils';

@Component({})
export default class index extends Vue {
  filterForm: any = {
    batch: '',
    materialName: '',
    productType: undefined,
    beginTime: '',
    endTime: '',
  };
  selectTotal:number = 0;
  tableOption: any = {
    loading: false,
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        customRender: (text: any, record: any, index: number) => index + 1,
      },
      {
        title: '发货日期',
        dataIndex: 'createDate',
        key: 'createDate',
        align: 'center',
      },
      {
        title: '批号',
        dataIndex: 'batch',
        key: 'batch',
        align: 'center',
      },
      {
        title: '产品名称',
        dataIndex: 'materialName',
        key: 'materialName',
        align: 'center',
      },
      {
        title: '产品大类',
        dataIndex: 'inventoryType',
        key: 'inventoryType',
        align: 'center',
      },
      {
        title: '规格',
        dataIndex: 'spec',
        key: 'spec',
        align: 'center',
      },
      {
        title: '装量',
        dataIndex: 'loadingQuantity',
        key: 'loadingQuantity',
        align: 'center',
      },
      {
        title: '发货数量',
        dataIndex: 'quantity',
        key: 'quantity',
        align: 'center',
        className: "purple-header",
      },
    ],
    dataSource: [],
    pagination: {
      pageSize: 10,
      current: 1,
      total: 0,
      showTotal: (total: number) => `共${total}条`,
      onChange: (page: number, pageSize: number) => {
        this.tableOption.pagination.current = page;
        this.getTableData();
      },
    },
  };

  async getTableData() {
    this.tableOption.loading = true;
    await this.getTotal();
    try {
      const params = {
        pageSize: this.tableOption.pagination.pageSize,
        page: this.tableOption.pagination.current,
        batch: this.filterForm.batch,
        name: this.filterForm.materialName,
        inventoryType: this.filterForm.productType,
        startTime: this.filterForm.beginTime,
        endTime: this.filterForm.endTime,
      };
      // 这里需要后端提供对应的API接口
      const res = await nextApi.productSendStatisticsList(params);
      this.tableOption.dataSource = res.data?.rows || res.data?.records || [];
      this.tableOption.pagination.total = res.data?.total || 0;
    } finally {
      this.tableOption.loading = false;
    }
  }

  handleSearch() {
    this.tableOption.pagination.current = 1;
    this.getTableData();
  }

  async getTotal(){
	const params = {
		batch: this.filterForm.batch,
        name: this.filterForm.materialName,
        inventoryType: this.filterForm.productType,
        startTime: this.filterForm.beginTime,
        endTime: this.filterForm.endTime,
	}
	const res = await nextApi.selectTotal(params);
	this.selectTotal = res.data;
  }

  handleReset() {
    this.filterForm.batch = '';
    this.filterForm.materialName = '';
    this.filterForm.productType = '';
    this.filterForm.beginTime = '';
    this.filterForm.endTime = '';
    this.handleSearch();
  }

  dateChange(dates: any) {
    this.filterForm.beginTime = dates[0];
    this.filterForm.endTime = dates[1];
  }

  exportData() {
    this.tableOption.loading = true;
	const params = {
		batch: this.filterForm.batch,
        name: this.filterForm.materialName,
        inventoryType: this.filterForm.productType,
        startTime: this.filterForm.beginTime,
        endTime: this.filterForm.endTime,
	}
    nextApi.exportSellRecrod(params,(res: any) => {
      const blob = new Blob([res.data], {
        type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
      });
      downLoadFile(blob, '发货量统计表.xlsx');
      this.tableOption.loading = false;
    });
  }

  mounted() {
    this.getTableData();
  }
}
</script>


<style scoped lang="scss">
.table-container {
  margin: 20px 0;
}
.ant-table td {
  white-space: nowrap;
}
.ant-table-thead > tr > th.purple-header {
  background-color: #c787ee !important;
  color: #fff !important;
}
</style>
